<template>
	<view class="settlementBar">
		<view class="col-center">
			<van-checkbox :value="if_choose_all" checked-color="red" @change="onChange">全选</van-checkbox>
		</view>
		
		<view class="col-center">
			<view class="flex">
				<text class="settlementBar__count">已选{{ product_count }}件，合计</text>
				<!-- <price :is-total-price="true"></price> -->
				<view class="settlementBar__price">
					<text class="settlementBar__price-symbol">￥</text>
					<text class="settlementBar__price-integer">{{integer_of_price}}</text>
					<text class="settlementBar__price-decimal">{{`.${decimal_of_price}`}}</text>
				</view>
			</view>
		</view>
		
		<button class="settlementBar__submit" type="warn">去结算</button>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	// 复选框
	const { isAllChosen: if_choose_all } = storeToRefs(useIsChosenStore())
	const { updateIsChosenByIsAllChosen } = useIsChosenStore()
	function onChange(event){
		console.log("try to click")
		if_choose_all.value = event.detail
		updateIsChosenByIsAllChosen();
	}
	// 提交表单
	const formData = ref({
		product_count: 0,
		total_price: 0,
	})
	
	import { storeToRefs } from "pinia"
	import { useIsChosenStore } from "../stores/isChosen";
	import { useTotalPriceStore } from '../stores/totalPrice';
	const { isChosen } = storeToRefs(useIsChosenStore())
	const product_count = computed(()=>{
		let count = 0;
		isChosen.value.forEach((item)=>{
			count += item.product.filter(it => it === true).length;
		})
		return count;
	})
	
	const { totalPrice } = storeToRefs(useTotalPriceStore());
	const integer_of_price = computed(()=>{
		return Math.trunc(totalPrice.value);
	});
	const decimal_of_price = computed(()=>{
		let d = (totalPrice.value - Math.trunc(totalPrice.value)).toFixed(2).slice(2);
		return d == 0 ? "00" : d;
	});
</script>

<style lang="scss" scoped>
	.col-center{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.settlementBar{
		width: 100%;
		height: 7%;
		border: none;
		box-shadow: 0rpx -1rpx 2rpx grey;
		padding: 15rpx 20rpx 3% 20rpx;
		position: fixed;
		bottom: 0%;
		display: flex;
		flex-direction: row;
		background-color: rgba(255, 255, 255, 1);
		z-index: 999;
		&__count{
			font-size: 13px;
			margin-left: 13rpx;
		}
		&__num{
			font-size: 20rpx;
		}
		&__price{
			&-symbol{
				color: red;
				font-size: 10px;
			}
			&-integer{
				color: red;
				font-size: 18px;
			}
			&-decimal{
				color: red;
				font-size: 10px;
			}
		}
		&__submit{
			margin-top: auto;
			margin-bottom: auto;
			margin-right: 40rpx;
			// height: 80%;
			width: 200rpx;
			font-size: 28rpx;
		}
	}
</style>